<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <tips optionTemplate="parentsQuestionnaireList"></tips>
      <div class="hearder-search">
        <div class="toplineBox mb-10">
          <div class="toplineBox-left">
            <el-input v-model="searchWord.title" placeholder="问卷标题" size="small" class="w-140 mr-10"></el-input>
            <el-input v-model="searchWord.real_name" placeholder="问卷发布人" size="small" class="w-140 mr-10"></el-input>
            <el-date-picker
                v-model="searchWord.year"
                type="year"
                size="small"
                class="mr-10"
                value-format="yyyy"
                placeholder="选择年">
            </el-date-picker>
            <el-button type="primary" size="small" @click="searchFn"><i class="el-icon-search"></i>搜索</el-button>
            <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>刷新</el-button>
            <downexcel type="questionList" :option="{title: searchWord.title, real_name: searchWord.real_name, year: searchWord.year}"></downexcel>
          </div>
          <p class="numberline toplineBox-right">总{{ page.total }}条</p>
        </div>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
              ref="multipleTable"
              :data="arryList"
              :stripe="tableStyle.tableStripe"
              :border="tableStyle.tableBorder"
              tooltip-effect="dark"
              style="width: 100%"
              header-cell-class-name="table-text-c"
              cell-class-name="table-text-c">
<!--            <el-table-column-->
<!--                prop="id"-->
<!--                label="ID"-->
<!--                width="60">-->
<!--            </el-table-column>-->
            <el-table-column
                prop="title"
                label="问卷标题">
            </el-table-column>
            <el-table-column
                label="发布人">
              <template slot-scope="scope">
                <span v-if="scope.row.user" class="onelist">{{ scope.row.user.realname }}</span>
                <span v-else class="c-danger">无数据</span>
              </template>
            </el-table-column>
            <el-table-column
                label="审核人">
              <template slot-scope="scope">
                <span v-if="scope.row.user" class="onelist">{{ scope.row.examine.realname }}</span>
                <span v-else class="c-danger">无数据</span>
              </template>
            </el-table-column>
            <el-table-column
                label="问卷范围"
                width="140">
              <template slot-scope="scope">
                <span v-if="scope.row.type==0">全校</span>
                <span v-if="scope.row.type==1">特定年段(<span v-for="(item,index) in scope.row.section_id"
                                                          :key="index">{{ item.section_name }}</span>)</span>
                <span v-if="scope.row.type==2">特定班级(<span v-for="(item,index) in scope.row.class_id"
                                                          :key="index">{{ item.class_name }}</span>)</span>
              </template>
            </el-table-column>
            <el-table-column
                label="问卷人数">
              <template slot-scope="scope">
                {{ scope.row.count }}
              </template>
            </el-table-column>
            <el-table-column
                label="已反馈人数">
              <template slot-scope="scope">
                <!--<span @click="checkUserList(scope.$index)" class="geiUser">{{scope.row.read_number}}</span>-->
                <!--                <el-button size="small" @click="detelTearch(scope.row.id)">{{ scope.row.read_number }}</el-button>-->
                <el-button size="small" @click="noticeId=scope.row.id,listType=1,signForVisible=true">
                  {{ scope.row.read_number }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
                label="未反馈人数">
              <template slot-scope="scope">
                <!--<span @click="checkUserList(scope.$index)" class="geiUser">{{scope.row.count-scope.row.read_number}}</span>-->
                <!--                <el-button size="small" @click="checkUserList(scope.$index)">-->
                <!--                  {{ scope.row.count - scope.row.read_number }}-->
                <!--                </el-button>-->
                <el-button size="small" @click="noticeId=scope.row.id,listType=2,signForVisible=true" v-if="scope.row.is_unread">
                  {{ scope.row.count - scope.row.read_number }}
                </el-button>
                <el-button size="small" v-else @click="timeloseFn">
                  {{ scope.row.count - scope.row.read_number }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
                prop="create_time"
                label="发布时间"
                width="120">
            </el-table-column>
            <el-table-column
                prop="create_time"
                label="有效时间"
                width="120">
              <template slot-scope="scope">
                <div class="timeline" @click="showEditTime(scope.row)">
                  <p>{{scope.row.start_time}}</p>
                  <p>至</p>
                  <p>{{scope.row.end_time}}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="140">
              <template slot-scope="scope">
                <el-dropdown @command="handleCommand" trigger="click">
                  <el-button type="primary" size="mini">
                    更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="1+'-'+scope.$index">签名详情</el-dropdown-item>
                    <el-dropdown-item :command="2+'-'+scope.$index" v-if="scope.row.showData">反馈报告</el-dropdown-item>
                    <el-dropdown-item :command="3+'-'+scope.$index" v-if="scope.row.showQrcode">
                      生成二维码
                    </el-dropdown-item>
                    <el-dropdown-item :command="5+'-'+scope.$index" v-if="scope.row.showCopyQuestion">二次修改发布
                    </el-dropdown-item>
                    <el-dropdown-item :command="4+'-'+scope.$index" v-if="userInfo.id==1">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
      <applycode :visible.sync="qrcodeVisible" :codetype="codetype" :listId="listId"></applycode>
    </div>
    <!--    inType 1 编辑审核 2 二次发布-->
    <detail :editId="detailId" :visible.sync="detailVisible" @getInit="InitFn" inType="2"></detail>
    <signFor :visible.sync="signForVisible" :noticeId="noticeId" :listType="listType" @InitFn="InitFn"></signFor>
    <questionDetail :visible.sync="questionDetailVisible" :detailId="questionDetailId"></questionDetail>
    <editTime :visible.sync="editTimeVisible" :questionData="questionData" typeline="1" @InitFn="InitFn"></editTime>
    <signDetail :visible.sync="signDetailVisible" :detailId="detailId"></signDetail>
  </div>
</template>

<script>
import applycode from '@/components/dialog/applycode.vue'
import {pagination, tableoption} from '@/utils/util.js'
import api from '@/utils/api.js'
import {mapGetters, mapActions} from "vuex";
import detail from "./components/detail";
import signFor from './components/sign-for'
import questionDetail from "./components/questionDetail";
import editTime from "./components/editTime";
import signDetail from './components/sign-detail'

export default {
  components: {
    applycode,
    detail,
    signFor,
    questionDetail,
    editTime,
    signDetail
  },
  data() {
    return {
      codetype: 2, // 1 通知 2 问卷
      questionDetailVisible: false,
      qrcodeVisible: false,
      detailVisible: false,
      detailId: 0,
      signForVisible: false,
      noticeId: 0,
      listType: 0,
      questionDetailId: 0,
      arryList: [], // 页面数据列表
      // 搜索设置
      searchWord: {
        title: '',
        real_name: '',
        year: ''
      }, // 搜索名称
      // 设置table样式
      tableStyle: tableoption,
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      handleSelection: [], // checked选中框
      listId: 0,
      questionData: null,
      editTimeVisible: false,
      signDetailVisible: false
    }
  },
  created() {
    this.GetInfo()
        .then(res => {
          this.InitFn()
        });
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    ...mapActions(['GetInfo']),
    // 初始化
    InitFn() {
      let data_ = JSON.parse(JSON.stringify(this.searchWord));
      data_.p = this.page.pageindex;
      data_.is_examine = 1;
      this.$fetch(this.api.admin_questionnaire_index, data_).then((response) => {
        console.log('用户身份，', this.userInfo)
        if (!response.code) {
          for (let item of response.list.data) {
            item.create_time = item.create_time.split(' ')[0]
            item.showData = false // 反馈报告 showQrcode 二维码 只有老师可以生成 0 班主任 1 带班老师
            item.showQrcode = false
            item.showCopyQuestion = false
            item.start_time =  item.start_time.split(' ')[0]
            item.end_time =  item.end_time.split(' ')[0]
            // 二维码在老师身份之前需要做权限判断，问卷的范围
            // type 0 全校 1 特定年段 2 特定班级
            // userInfo class_id section_id: 1
            // 0 班主任 1 带班老师 2 其他
            if (Number(this.userInfo.type) === 0 || Number(this.userInfo.type) === 1) {
              if (item.type === 1) {
                // 匹配年段,多个
                for (let itemSection of item.section_id) {
                  if (this.userInfo.section_id === itemSection.id) {
                    item.showQrcode = true
                  }
                }
              } else if (item.type === 2) {
                // 匹配班级,多个
                for (let itemClass of item.class_id) {
                  if (this.userInfo.class_id === itemClass.id) {
                    item.showQrcode = true
                  }
                }
              } else {
                item.showQrcode = true
              }
            }
            // 只有发布人才可以二次复制发布
            if (this.userInfo.id === item.user_id) {
              item.showCopyQuestion = true
            }
            // 反馈报告如果有展示人员时
            if (item.see_user) {
              item.see_user = item.see_user.split(',')
              console.log('查看人员：',item.see_user,this.userInfo.id.toString())
              if (item.see_user.indexOf(this.userInfo.id.toString()) !== -1) {
                item.showData = true
              }
              if (this.userInfo.is_all === 1) {
                item.showData = true
              }
            } else {
              item.showData = true
            }
          }
          this.arryList = response.list.data
          this.page.total = response.list.total
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    checkIdCard(option) {
      this.editId = option || ''
      this.addclassVisible = true
    },
    handleSelectionChange(val) {
      this.handleSelection = val
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    searchFn() {
      this.page.pageindex = 1;
      this.InitFn()
    },
    timeloseFn(){
      // this.$message.warning('过期数据')
      this.$alert('未反馈人数不展示非本学期问卷', '提示', {
        confirmButtonText: '确定',
        callback: action => {

        }
      });
    },
    // 刷新页面
    refreshFn() {
      this.searchWord.title = '';
      this.searchWord.real_name = '';
      this.searchWord.year = '';
      this.page.pageindex = 1;
      this.InitFn()
    },
    addStudent() {
      this.addVisible = true
    },
    gotoDetail(id) {
      // this.$router.push('questionnaireDetail?editId=' + id)
      this.questionDetailId = id
      this.questionDetailVisible = true
    },
    detelTearch(id) {
      this.detailId = id
      this.signDetailVisible = true
      // this.$router.push('questionlistDetail?editId=' + id)
    },
    getqrcode(index) {
      this.listId = this.arryList[index].id
      this.qrcodeVisible = true
    },
    detelfn(id, index) {
      this.$post(api.admin_questionnaire_delete, {id: id}).then((response) => {
        if (response.code === 0) {
          this.arryList.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    checkUserList(index) {
      this.$router.push('questionuserlist?id=' + this.arryList[index].id)
    },
    handleDetel(index) {
      this.$confirm('确认永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(index)
      }).catch(() => {
      })
    },
    detelRespon(index) {
      this.$post(api.admin_questionnaire_delete, {id: this.arryList[index].id}).then((response) => {
        if (response.code === 0) {
          this.arryList.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleCommand(command) {
      let command_ = command.split('-')
      let n = this;
      if (Number(command_[0]) === 1) {
        this.detelTearch(this.arryList[command_[1]].id)
      }
      // 视频采集
      if (Number(command_[0]) === 2) {
        this.gotoDetail(this.arryList[command_[1]].id)
      }
      // 视频记录
      if (Number(command_[0]) === 3) {
        this.getqrcode(command_[1])
      }
      if (Number(command_[0]) === 4) {
        this.handleDetel(command_[1])
      }
      if (Number(command_[0]) === 5) {
        this.gotoDetailEdit(this.arryList[command_[1]].id)
      }
    },
    gotoDetailEdit(id) {
      // this.$router.push('questionnaireCopyDetail?editId=' + id)
      this.detailId = id
      this.detailVisible = true
    },
    showEditTime(row){
      this.questionData = JSON.parse(JSON.stringify({
        id: row.id,
        start_time: row.start_time.split(' ')[0],
        end_time: row.end_time.split(' ')[0],
      }))
      this.editTimeVisible = true
    }
  },
  mounted() {
  },
  // // 缓存机制 star
  // beforeRouteEnter(to, from, next) {
  //   // 利用路由元信息中的 meta 字段设置变量，方便在各个位置获取。这就是为什么在 meta 中定义 isNeedRefresh。
  //   // 当从详情页返回时，将 isNeedRefresh 设为 false，表示不刷新数据
  //   if (to.meta.isNeedRefresh) {
  //     this.InitFn() // 详情页面需要刷新数据
  //   }
  //   next()
  // },
  // beforeRouteLeave(to, from, next) {
  //   // isNeedRefresh 进入页面判断是否需要刷新
  //   if (to.meta.isNeedRefresh) {
  //     from.meta.keepAlive = true
  //   } else {
  //     from.meta.keepAlive = false
  //   }
  //   next()
  // }
  // // 缓存机制 end
}
</script>
<style>
.timeline p:nth-child(2){
  font-size: 12px;
  height: 10px;
  line-height: 10px;
  color: #999;
}
.timeline:hover{
  text-decoration: underline;
  color: #006dcd;

}
</style>
